<template>
  <view class="my">
    <view class="contentLogin" style="margin-top: 20rpx">
      <view class="contentInpu">
        <button
          class="avatar-wrapper"
          open-type="chooseAvatar"
          @chooseavatar="onChooseAvatar"
        >
          <image class="avatar" :src="avatarUrl"></image>
        </button>
        <view class="contentInpuTips"> 点击选择头像 </view>
      </view>
      <view class="contentInpuText">
        <view class="title"> 昵称: </view>
        <view class="inpu">
          <input
            type="nickname"
            v-model="nickname"
            class="weui-input"
            @change="changeName"
            placeholder="请选择/输入昵称"
          />
        </view>
      </view>
      <view class="login">
        <button @click="login" class="button" type="default">一键登录</button>
      </view>
    </view>
  </view>
</template>

<script>
import { showLoading, hideLoading } from "@/assets/js/index";

var vm;
const defaultAvatarUrl =
  "https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0";
export default {
  data() {
    return {
      userInfo: {},
      wxCode: "",
      avatarUrl: defaultAvatarUrl,
      nickname: "",
    };
  },
  onLoad() {
    vm = this;
    wx.showShareMenu({
      withShareTicket: true,
      menus: ["shareAppMessage", "shareTimeline"],
    });
  },
  methods: {
    changeName(e) {
      vm.nickname = e.detail.value;
    },
    onChooseAvatar(e) {
      vm.avatarUrl = e.detail.avatarUrl;
    },
    login() {
      if (vm.nickname == "") {
        vm.$log("请输入昵称或获取您的微信昵称！");
      } else {
        showLoading();
        wx.getUserProfile({
          desc: "微信授权登录", // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
          success: (res) => {
            console.log(res);
            vm.userInfo = res.userInfo;
            vm.userInfo.nickName = vm.nickname;
            uni.login({
              success(res1) {
                // if (res.errMsg !== 'login:ok') return
                vm.wxCode = res1.code;
                vm.loginSuccess();
              },
            });
          },
        });
      }
    },
    loginSuccess() {
      let param = vm.userInfo;
      delete param.is_demote;
      vm.$post("api/user/login", {
        appId: "wx94123074b4b66770",
        code: vm.wxCode,
        userInfo: param,
      }).then((res) => {
        if (res.success) {
          uni.setStorageSync("token", res.data.tokenInfoVO.accessToken);
          uni.setStorageSync("userId", res.data.userId);
          //登录成功  去首页
          hideLoading();
          uni.switchTab({
            url: "/pages/index/index",
          });
        } else {
          vm.$log(res.msg);
          hideLoading();
        }
      });
    },
  },
};
</script>

<style lang="scss">
.contentLogin {
  .login {
    text-align: center;

    .button {
      width: 92%;
      height: 80rpx;
      text-align: center;
      background-color: #f3f3f3;
      text-align: center;
      line-height: 80rpx;
      border-radius: 40rpx;
      margin-top: 80rpx;
    }
  }

  .contentInpuText {
    margin-top: 60rpx;
    padding: 30rpx 30rpx;
    border-top: 1rpx solid #f3f3f3;
    border-bottom: 1rpx solid #f3f3f3;
    display: flex;
    flex-direction: row;

    .title {
      width: 20%;
    }

    .inpu {
      width: 80%;
      padding-left: 60rpx;
      box-sizing: border-box;
    }
  }

  .contentInpu {
    text-align: center;

    .avatar-wrapper {
      border-radius: 50%;
      width: 172rpx;
      height: 172rpx;
      overflow: hidden;

      .avatar {
        width: 172rpx;
        height: 172rpx;
        border-radius: 50%;
      }
    }

    .contentInpuTips {
      font-size: 26rpx;
      text-align: center;
      margin-top: 10rpx;
    }
  }
}
</style>